<!--
 * @Author: xiuquanxu
 * @Company: kaochong
 * @Date: 2020-12-16 12:55:48
 * @LastEditors: xiuquanxu
 * @LastEditTime: 2020-12-16 13:02:42
-->
<html>
    <meta charset="utf-8"></meta>
    <style>
        .translate {
            width: 200px;
            height: 200px;
            background-color: black;
            transform: translate(10px, 10px);
        }
        .scale {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            background-color: black;
            transform: scale(0.5, 0.5);
        }  
        .rotate {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            background-color: black;
            transform: rotate(45deg);
        }
        .skew {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            background-color: black;
            transform: skew(30deg, 30deg);
        }
        .normal {
            width: 200px;
            height: 200px;
            background-color: black;
        }
    </style>
    <body>
        <div class="translate">

        </div>
        <div class="scale">

        </div>
        <div class="rotate">

        </div>
        <div class="skew">
        </div>
        <div class="normal">

        </div>
    </body>
</html>